<template>
    <div class="hello">
      <template>
        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
        <el-button type="success" @click="deletebth()">删除</el-button>

        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column
            prop="createTime"
            label="日期"
            width="120">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="imgurl"
            label="图片"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="tname"
            label="类型"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="jianjie"
            label="简介"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="deleterow(scope.row.id)" type="text" size="small">删除</el-button>
              <el-button @click="getByid(scope.row.id)" type="text" size="small" >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="3"
          :total="total">
        </el-pagination>
        <div style="margin-top: 20px">
          <!--<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
          <el-button @click="toggleSelection()">取消选择</el-button>-->
          <!-- Form -->

          <el-dialog title="编辑商品" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="form.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="图片" :label-width="formLabelWidth">
                <el-input v-model="form.imgurl" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="类型" :label-width="formLabelWidth">
                <el-select v-model="form.tid" placeholder="请选择活动区域" >
                  <el-option  v-for="type in typelist" :key="type.id" :label="type.name" :value="type"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="介绍" :label-width="formLabelWidth">
                <el-input v-model="form.jianjie" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="save()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </template>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [],
        total:0,
        multipleSelection: [],
        deleteids:[],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {},
        typelist:[],
        formLabelWidth: '120px'
      }
    },
    //钩子函数，页面加载后执行
    created: function () {
      this.getData(3,1);
      this.getTypes();
    } ,
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      //获取数据列表
      getData(pageSize,pageNum) {
        this.$axios.get('/shop/pageList?pageSize='+pageSize+"&pageNum="+pageNum).then(res => {
          this.tableData =res.data.list;
          this.total = res.data.total;
        })
      },
      //翻页
      handleCurrentChange(pageNum){
          this.getData(3,pageNum);
      },
      //保存
      save(){
        this.$axios.post('/shop/save',this.form).then(res => {
          this.getData(3,1);
          this.dialogFormVisible = false;
          this.form={};
        })
      },
      //回显
      getByid(id){
        this.$axios.get('/shop/getById/'+id).then(res => {
          this.form =res.data;
          this.dialogFormVisible = true;
        })
      },
      //行内删除
      deleterow(id){
        this.deleteids.push(id);
        this.$axios.post('/shop/delete',this.deleteids).then(res => {
          this.getData(3,1);
          this.dialogFormVisible = false;
        })
      },
      //批量删除
      deletebth(){
        for(var i=0;i<this.multipleSelection.length;i++){
          this.deleteids.push(this.multipleSelection[i].id);
        }
        this.$axios.post('/shop/delete',this.deleteids).then(res => {
          this.getData(3,1);
          this.dialogFormVisible = false;
        })
      },
      //获取类型
      getTypes(){
        this.$axios.get('/shop/getTypes').then(res => {
          this.typelist =res.data;
          console.log(this.typelist);
        })
      }

    }
  }
</script>
